/**
 * @file
 * @auth jinguangguo
 * @date 2016/12/29
 */

import Vue from 'vue';
import particleConfig from '../../common/particleConfig';
import tpl from './tpl.html';
import NbdaxHead from './header/main';
import Price from './price/main';
import Slide from './slide/main';
import Started from './started/main'
import Coins from './coins/main';
import Step from './step/main';

import commonService from '../../common/commonService'
import lib from '../../../src/common/lib'
export default Vue.extend({
    name: 'index',
    template: tpl,
    data(){
        return {
            lib:lib,
            fixHeight: 0,
            hasNotice: false,
            noticeTxt: '',
            noticeLink: '',
            slideWidth: 0,
            hasTriggered: false
        }
    },
    created() {
        this.renderNotice();

        // 解决走马灯初始化时的抖动问题
        $(document).off('$$slide').on('$$slide', (event) => {
            if (this.hasTriggered === false) {
                if (lib.isMobile() === false){
                    this._slide();
                }
                this.hasTriggered = true;
            }
        });
    },
    mounted(){
        // this.scrollAnimate();
        this.fixHeight = $('.index-header')[0].clientHeight;
    },
    components: {
        NbdaxHead,
        Price,
        Slide,
        Started,
        Coins,
        Step
    },
    methods: {

        /**
         * 开始走马灯
         * @private
         */
        _slide() {

            const WIDTH_PRICE_ITEMS = 2;    // 几个price实例
            const STEP_PX = 1;
            const STEP_TIME = 10;  // ms

            let timeId;

            let currentOffset = 0;
            // debugger;
            let $dom = $(this.$refs.priceContainer);

            let slideWidth = $dom.width();
            let slideReset = slideWidth / WIDTH_PRICE_ITEMS;

            timeId = window.setInterval(() => {
                start();
            }, STEP_TIME);
            
            function start() {
                currentOffset = currentOffset + STEP_PX;
                $dom.css({
                    '-webkit-transform': 'translateX(-' + currentOffset + 'px)',
                    'transform': 'translateX(-' + currentOffset + 'px)'
                });
                // console.log('The currentOffset is ' + currentOffset);
                if (currentOffset >= slideReset) {
                    currentOffset = 0;
                }
            }

            $dom.on('mouseenter', (e) => {
                window.clearTimeout(timeId);
            });

            $dom.on('mouseleave', (e) => {
                timeId = window.setInterval(() => {
                    start();
                }, STEP_TIME);
            });

        },
        renderNotice() {
            let params = {
                pageNo: 1,
                pageSize: 1,
                topStatus: "YES"
            };
            commonService.getNotice(params).done((rep)=> {
                if (rep.code === window.CODE.SUCCESS) {
                    let list = rep.data.list;
                    let obj = {};
                    if (list !== null && list.length > 0) {
                        this.hasNotice = true;
                        obj = list[0];
                        this.noticeLink = "./notice.html#/detail/" + obj.noticeId;
                        this.noticeTxt = obj.title;
                    } else {
                        this.hasNotice = false;
                    }
                } else {
                    window.error(rep.msg);
                }
            }).fail((rep)=> {
                window.error(rep.msg);
            });
        },
    }
});
